<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>凤凰网导航栏</title>
    <style>
        /*----------初始化-----------*/
        body,h1,h2,h3,h4,h5,h6,ul,li{
            margin: 0;
            padding: 0;
        }
        /*----------end-------------*/

        /*---------最上面div-------------*/
        .dingBu{
            width: 1200px;
            margin: 0 auto;
            /*border: 1px solid red;*/
            height: 50px;
        }
        .dingBu .dingBu_left{
            /*border: 1px solid blue;*/
            height: 50px;
            width: 598px;
            float: left;
        }
        .dingBu .dingBu_right{
            /*border: 1px solid blue;*/
            height: 50px;
            width: 598px;
            float: right;
        }
        .dingBu .dingBu_right .d_r_top{
            display: flex;
            justify-content: space-around;
            height: 24px;
            /*border: 1px solid red;*/
        }
        .dingBu .dingBu_right .d_r_bottom{
            height: 24px;
            /*border: 1px solid red;*/
        }
       .d_r_bottom_ul{
           list-style: none;
           display: flex;
           justify-content: space-around;
       }
        .d_r_bottom_ul .d_r_b_lj a{
            font-size: 14px;
            text-decoration: none;
            color: #212223;
        }
        .d_r_bottom_ul .d_r_b_lj a:hover{
            color: #f54343;
        }
        .d_r_b_lj:nth-child(1) b{
            display: inline-block;
            width: 28px;
            height: 20px;
            background-image: url("./凤凰网/sousuo.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .d_r_b_lj:nth-child(2) b{
            display: inline-block;
            width: 28px;
            height: 20px;
            background-image: url("./凤凰网/sp.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .d_r_b_lj:nth-child(3) b{
            display: inline-block;
            width: 28px;
            height: 20px;
            background-image: url("./凤凰网/down.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .d_r_b_lj:nth-child(4) b{
            display: inline-block;
            width: 28px;
            height: 20px;
            background-image: url("./凤凰网/zhuce.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .d_r_b_lj:nth-child(5) b{
            display: inline-block;
            width: 28px;
            height: 20px;
            background-image: url("./凤凰网/denglu.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        /*------------end-----------*/

        /*-----------导航栏div----------*/
        .daoHang{
            width: 100%;
            height: 50px;
            background: red;
        }
        .daoHang .d_h_in{
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .d_h_in .list a{
            display: inline-block;
            height: 50px;
            width: 70px;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            text-decoration: none;
            color: #ffffff;
        }
        .d_h_in .list a:hover{
            background-color: #f76969;
        }
        /*-----------end------------*/
        /*----------底部导航div--------*/
        .bottom_daoHang{
            width: 1200px;
            margin: 0 auto;
            /*border: 1px solid red;*/
            height: 50px;
        }
        .bottom_daoHang ul{
            list-style: none;
            display: flex;
            justify-content: space-between;
            line-height: 50px;
        }
        .bottom_daoHang ul a{
            text-decoration: none;
            font-size: 12px;
            color:#536563;
        }
        .bottom_daoHang ul a:hover{
            color: #f98543;
        }
        /*所有的之后都加上|*/
        .bottom_daoHang ul a::after{
            content: '|';
            color: #e8e8e8;
            margin-left: 20px;
        }
        /*选中最后一个不要加|*/
        .bottom_daoHang li:last-child a::after{
            content: '';
        }
        /*-----------end------------*/
    </style>
</head>
<body>
    <!--顶部div-->
    <div class="dingBu">
        <!--顶部中的左侧div-->
        <div class="dingBu_left">
            <img src="./凤凰网/ifengLogo.png" height="50" width="150">
        </div>
        <!--顶部中的右侧div-->
        <div class="dingBu_right">
            <!--顶部中的右侧的顶部div-->
            <div class="d_r_top">
                <img src="./凤凰网/shehuizhuyi.jpg" width="150">
                <img src="./凤凰网/jijinhui.jpg" width="160">
            </div>
            <!--顶部中的右侧的底部div-->
            <div class="d_r_bottom">
                <ul class="d_r_bottom_ul">
                    <li class="d_r_b_lj"><b></b><a href="#">搜索</a></li>
                    <li class="d_r_b_lj"><b></b><a href="#">PHOENIX TV</a></li>
                    <li class="d_r_b_lj"><b></b><a href="#">下载客户端</a></li>
                    <li class="d_r_b_lj"><b></b><a href="#">注册</a></li>
                    <li class="d_r_b_lj"><b></b><a href="#">登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--导航栏-->
    <div class="daoHang">
        <div class="d_h_in">
            <div class="list"><a href="#">资讯</a></div>
            <div class="list"><a href="#">财经</a></div>
            <div class="list"><a href="#">科技</a></div>
            <div class="list"><a href="#">凤凰卫视</a></div>
            <div class="list"><a href="#">娱乐</a></div>
            <div class="list"><a href="#">时尚</a></div>
            <div class="list"><a href="#">军事</a></div>
            <div class="list"><a href="#">体育</a></div>
            <div class="list"><a href="#">中国力量</a></div>
            <div class="list"><a href="#">政务</a></div>
            <div class="list"><a href="#">汽车</a></div>
            <div class="list"><a href="#">房产</a></div>
            <div class="list"><a href="#">视频</a></div>
            <div class="list"><a href="#">美好中国</a></div>
            <div class="list"><a href="#">小说</a></div>
            <div class="list"><a href="#">凰家尚品</a></div>
        </div>
    </div>
    <!--底部导航-->
    <div class="bottom_daoHang">
        <!--选择使用ul li方式-->
        <ul>
            <li><a href="#">直播</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">智库</a></li>
            <li><a href="#">股票</a></li>
            <li><a href="#">数码</a></li>
            <li><a href="#">评测</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">读书</a></li>
            <li><a href="#">国学</a></li>
            <li><a href="#">佛教文化</a></li>
            <li><a href="#">酒业</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">公益</a></li>
            <li><a href="#">教育</a></li>
            <li><a href="#">健康</a></li>
            <li><a href="#">5G</a></li>
            <li><a href="#">创新</a></li>
        </ul>
    </div>
</body>
</html>